<template >
  <div class="index">
    <div class="container">
      <div class="swiper-box">
        <div class="nav-menu">
        <ul class="menu-wrap">
          <li class="menu-item">
            <a href="javascript:;">手机 电话卡</a>
            <div class="children"></div>
          </li>
           <li class="menu-item">
            <a href="javascript:;">电视 盒子</a>
            <div class="children"></div>
          </li>
           <li class="menu-item">
            <a href="javascript:;">笔记本 平板</a>
            <div class="children"></div>
          </li>
          <li class="menu-item">
            <a href="javascript:;">笔记本 平板</a>
            <div class="children"></div>
          </li>
          <li class="menu-item">
            <a href="javascript:;">笔记本 平板</a>
            <div class="children"></div>
          </li>
          <li class="menu-item">
            <a href="javascript:;">笔记本 平板</a>
            <div class="children"></div>
          </li>
        </ul>
      </div>
        <swiper 
         :modules="modules" 
          navigation
          :autoplay="true"
          :effect="cube"
          :loop="true"
         :pagination="{ clickable: true }"
          >
          <swiper-slide v-for="(item,index) in slideList" :key="index">
            <a v-bind:href="'/#/goods/'+ item.id" target="_blank">
            <img v-bind:src="item.img" alt=""></a>
          </swiper-slide>
        </swiper>
      </div>
      <div class="abs-box"></div>
      <div class="banner"></div>
      <div class="product-box">
        <h2>手机</h2>
        <div class="wrapper">
          <div class="banner-left">
             <a href="/#/product/35"><img src="/imgs/mix-alpha.jpg" alt=""></a>
          </div>
          <div class="list-box">
            <div class="list" v-for="(arr,i) in phoneList" v-bind:key="i">
              <div class="item" v-for="(item,j) in arr" v-bind:key="j">
                <span>新品</span>
                <div class="item-img">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6f2493e6c6fe8e2485c407e5d75e3651.jpg" alt="">
                </div>
                <div class="item-info">
                  <h3>手机</h3>
                  <p>索尼手机</p>
                  <p class="price">2999</p>
                </div>
              </div>
            </div>
             <div class="list"></div>
          </div>
        </div>
      </div>
    </div>
    </div>
</template>

<script>
 // Import Swiper Vue.js components
  import { Swiper } from 'swiper/vue/swiper';
  import { SwiperSlide } from 'swiper/vue/swiper-slide';
  import { Navigation, Pagination, Scrollbar, A11y,EffectFade } from 'swiper';

  // Import Swiper styles
  import 'swiper/swiper-bundle.css';


export default {
  name: 'Index',
   components: {
    Swiper,
    SwiperSlide
  },
  data(){
    return {
      swiperOption:{

      },
      phoneList:[[1,1,1,1],[1,1,1,1]],
      slideList:[
        {
          id:'42',
          img:'/imgs/slider/slide-1.jpg'
        },
        {
          id:'45',
          img:'/imgs/slider/slide-2.jpg'
        },
         {
          id:'45',
          img:'/imgs/slider/slide-3.jpg'
        },
         {
          id:'45',
          img:'/imgs/slider/slide-4.jpg'
        },
         {
          id:'45',
          img:'/imgs/slider/slide-5.jpg'
        },
      ],
       modules: [Navigation, Pagination, Scrollbar, A11y,EffectFade],
    }
  }
}

</script>

<style lang="scss">
  .index{
    .container{
      width:1226px;
      margin-right:auto;
      margin-left:auto;
      .swiper-box{
        .nav-menu{
          position: absolute;
          width: 264px;
          height: 451px;
          z-index: 9;
          padding:26px 0;
          background-color: #55585A7a;
          box-sizing: border-box;
          .menu-wrap{
            .menu-item{
              height: 50px;
              line-height:50px;
              a{
                display: block;
                position: relative;
                font-size: 16px;
                color:#fff;
                padding-left: 30px;
                &:after{
                    position: absolute;
                    right: 30px;
                    top: 17.5px;
                    content:' ';
                    display:inline-block;
                    width:19px;
                    height:17px;
                    background:url('/imgs/icon-arrow.png') no-repeat center;             
                }
              }
              &:after{
                background-color: #ff6600;
              }
            }
          }
        }
        .swiper-button-prev{
          left: 274px;
        }
        .swiper-wrapper{
          height: 451px;
          img{
            width: 100%;
            height: 100%;
          }
        }
       
        
      }
      .product-box{
        background-color: #f5f5f5;
        padding: 30px 0 50px;
        h2{
          font-size: 14px;
          height: 21px;
          line-height: 21px;
          color: #000;
          margin-bottom: 20px;
        }
        .wrapper{
          display: flex;
           .banner-left{
          margin-right:16px;
          img{
            width:224px;
            height:619px;
          }
        }

          .list-box{
            .list{
              display:flex;
              justify-content:space-between;
              align-items:center;
              width: 985px;
              margin-bottom: 14px;
              &:last-child{
                margin-bottom: 0;
              }
              .item{
                width: 236px;
                height: 302px;
                background-color: #fff;
                text-align: center;
                span{
                    
                }
                .item-img{
                  img{
                    height: 195px;
                  }
                }
                .item-info{
                  h3{
                    font-size: 14px;
                    color: #333;
                    line-height: 14px;
                    font-weight: bold;
                  }
                  p{
                    color: #999999;
                    line-height: 13px;
                    margin:6px auto 13px;
                  }
                  .price{
                    clear: #f20A0A;
                    font-size: 14px;
                    font-weight: bold;
                    cursor: pointer;
                    &:after{
                        display:inline-block;
                        width:22px;
                        height:22px;
                        background:url('/imgs/icon-cart-hover.png') no-repeat center;
                        background-size:22px;
                        content: '';
                        margin-left: 5px;

                    }  
                  }

                }
              }
            }
          }
        }
      }
    }
    
  }
</style>
